<template>
  <div class="box">
    <h1>组件间通信7: $refs & $children & $parent</h1>

    <p>BABA有存款: {{ money }}</p>
    <button @click="borrowMoney">找儿子借钱100</button><br />
    <button @click="borrowMoneyFromdaughter">找女儿借钱150</button><br />
    <button @click="borrowMoneyFormAll">找所有孩子借钱200</button><br />

    <br />
    <Son ref="son" />

    <br />
    <Daughter ref="daughter" />
  </div>
</template>

<script>
// $refs
// 如果绑定在原生标签上,获取的就是对应标签
// 如果绑定在组件标签上,获取的就是对应组件的实例
// 可以通过 ref属性绑定的属性值
// 通过this.$refs.ref属性绑定的属性值 来获取对应绑定的组件实例

// $children
// 通过 $children 可以获取到当前组件下所有的子组件实例所组成的数组集合
// 通过遍历就可以拿到每一个子组件

// $parent
// 在组件中使用 $parent 可以获取到对应组件的父组件
// 但是慎重使用 因为(多个不同的组件在使用子组件,每个组件中的数据是不一样的)
// 因为一个子组件可能有多个父组件在使用
// 但是 : $parent 在那个子组件中使用,获取的永远都是使用这个子组件的父组件实例
import Son from './Son'
import Daughter from './Daughter'
export default {
  name: 'ChildrenParentTest',
  data() {
    return {
      money: 1000
    }
  },
  components: {
    Son,
    Daughter
  },
  methods: {
    // 找儿子借钱 -> 100
    borrowMoney() {
      this.money += 100
      // 在组件标签上使用 ref 可以通过 $refs.(ref绑定的值) 来获取到对应的组件实例对象
      // 获取到组件实例之后,就可以修改 对应组件身上的数据
      this.$refs.son.money -= 100
      //   console.log(this.$refs.son)
    },
    // 找女儿借钱 -> 150
    borrowMoneyFromdaughter() {
      this.money += 150
      // 在组件标签上使用 ref 可以通过 $refs.(ref绑定的值) 来获取到对应的组件实例对象
      // 获取到组件实例之后,就可以修改 对应组件身上的数据
      this.$refs.daughter.money -= 150
    },
    // 找所有的孩子借钱
    borrowMoneyFormAll() {
      this.money += 200
      // this.$children 可以获取当前组件下所有的子组件
      // 值是当前组件下所有的子组件实例所组成的数组集合
      //   console.log(this.$children)
      this.$children.forEach((item) => {
        item.money -= 100
      })

      //   console.log(this.$parent)
    }
  }
}
</script>

<style></style>
